<template>
	<view class="wrap">
		<u-navbar title="黄金" :background="background" back-icon-color="#fff" back-icon-size="36" title-color="#fff"
			title-size="34" :border-bottom="false">
			<view slot="right" class="slot-right">
				<u-icon name="more-dot-fill" size="36" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="ui-box">
				<view class="ui-body">
					<view class="ui-flex">
						<view class="ui-hold">当前持有(克)</view>
						<u-icon name="eye" size="28" color="#999"></u-icon>
					</view>
					<view class="ui-flex ui-more">
						<view class="ui-number">0.0031</view>
						<u-icon name="arrow-right" size="24" color="#8b8b8b"></u-icon>
					</view>
					<view class="ui-flex">
						<div class="ui-tip">
							<view class="ui-value">
								价值<text>1.11</text>元
							</view>
							<u-icon name="info-circle" size="28" color="#9c9c9c"></u-icon>
						</div>
					</view>
					<view class="ui-ball ui-flex">
						<image src="../../static/uview/images/ball.png" mode=""></image>
					</view>
					<view class="ui-data">
						<view class="ui-data__item">
							<view class="ui-data__label">昨日收益(元)</view>
							<view class="ui-data__val">0.00</view>
						</view>
						<view class="ui-data__item">
							<view class="ui-data__label">持有收益(元)</view>
							<view class="ui-data__val">+0.11</view>
						</view>
						<view class="ui-data__item">
							<view class="ui-data__label">累计收益(元)</view>
							<view class="ui-data__val">+0.11</view>
						</view>
					</view>
					<view class="ui-group">
						<button type="default" class="btn sell-btn">卖出</button>
						<button type="default" class="btn buy-btn">买入</button>
					</view>
				</view>
				<view class="ui-footer">
					<view class="ui-select">
						<view class="left">
							<view class="label">实时金价</view>
							<view class="val">374.99</view>
							<view class="tag">实时</view>
						</view>
						<view class="right">
							<view class="value">+0.53%</view>
							<u-icon name="arrow-down" size="28" color="#cfcfcf"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="follow-card">
				<view class="title">关注<text>新能源+光伏+电子</text>核心赛道</view>
				<view class="follow-link">
					<view class="follow-sale">年度重磅新基今日正式开售</view>
					<view class="follow-go">GO<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">玩转黄金</view>
				</view>
				<view class="panel-body">
					<view class="gold-row clearfix">
						<view class="left">
							<view class="gold-nav nav1">
								<view class="gold-nav__head">
									<image src="../../static/uview/images/gold-icon1.png" mode="" class="img"></image>
									<view class="title">
										黄金票
									</view>
								</view>
								<view class="gold-nav__desc">可以免费提取黄金</view>
								<view class="gold-tag">
									<view class="gold-hot">HOT</view>
								</view>
								<button type="default" class="btn gold-btn">去看看</button>
							</view>
						</view>
						<view class="right">
							<view class="gold-nav nav2">
								<view class="gold-nav__head">
									<image src="../../static/uview/images/gold-icon2.png" mode="" class="img"></image>
									<view class="title">
										攒黄金
									</view>
								</view>
								<view class="gold-nav__desc">目标达成后可换实物</view>
							</view>
							<view class="gold-nav nav3">
								<view class="gold-nav__head">
									<image src="../../static/uview/images/gold-icon3.png" mode="" class="img"></image>
									<view class="title">
										黄金定投
									</view>
								</view>
								<view class="gold-nav__desc">一键开启 省心投资</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">大家都在聊</view>
				</view>
				<view class="panel-body">
					<view class="wx-cell">
						<view class="wx-cell__hd">
							黄金讨论区
						</view>
						<view class="wx-cell__bd">
							<view class="dic-list">
								<view class="dic-list__item">
									<image src="../../static/uview/images/dic1.png" class="img" mode=""></image>
									<view class="dic-talk">话说，好几天没有看见那些专家置...</view>
								</view>
								<view class="dic-list__item">
									<image src="../../static/uview/images/dic2.png" class="img" mode=""></image>
									<view class="dic-talk">只能说这不是一个好的厉害</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wx-cell">
						<view class="gold-news">
							<view class="gold-news__pic">
								<image src="../../static/uview/images/gold-zt.png" mode=""></image>
							</view>
							<view class="gold-news__content flex_bd">
								<view class="gold-news__zt">精选专题</view>
								<view class="gold-news__title">
									黄金风暴眼|美元走软黄金期货重新站上1800美元关口
								</view>
								<view class="gold-news__update">2小时前更新</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">黄金小应用</view>
				</view>
				<view class="panel-body">
					<view class="app-row">
						<u-row gutter="16">
							<u-col span="4">
								<view class="gold-app">
									<image src="../../static/uview/images/app1.png" mode=""></image>
									<view class="title">黄金大玩家</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="gold-app">
									<image src="../../static/uview/images/app2.png" mode=""></image>
									<view class="title">黄金计算器</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="gold-app">
									<image src="../../static/uview/images/app1.png" mode=""></image>
									<view class="title">黄金摇钱树</view>
								</view>
							</u-col>
						</u-row>
					</view>
				    <view class="see-more">
						<text class="iconfont icon-w_qushi"></text>
						<view class="title">查看更多黄金基金</view>
						<u-icon name="arrow-right" size="24" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
		    <view class="ui-footer">
				<view class="ui-footer-company">基金销售服务由蚂蚁(杭州)基金销售有限公司提供</view>
				<view class="ui-footer-tip">本页面非任何法律文件，投资前请阅读基金合同、招募说明书。购买黄金为黄金基金产品，请审慎投资。</view>
				<u-divider color="#cbcbcb" half-width="96" border-color="#e1e1e1" bg-color="" fontSize="24">该页面由蚂蚁财富平台设计并提供</u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#d5962c',
				}
			}
		},
		computed: {},
		onShow() {},
		methods: {}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.slot-right {
		padding: 12rpx 30rpx 12rpx 12rpx;
	}

	.content {
		padding: 20rpx 30rpx;
		position: relative;
	}

	.content::after {
		position: absolute;
		content: '';
		width: 140%;
		height: 200rpx;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #d5962c;
	}

	.ui-box {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		position: relative;
		z-index: 11;
		margin-bottom: 50rpx;
	}

	.ui-body {
		padding: 68rpx 0 32rpx;
	}

	.ui-hold {
		font-size: 24rpx;
		color: #151515;
		text-align: center;
		margin-right: 10rpx;
	}

	.ui-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ui-number {
		font-size: 60rpx;
		color: #343434;
		margin-right: 10rpx;
	}

	.ui-value {
		font-size: 24rpx;
		color: #575757;
		margin-right: 10rpx;

		text {
			color: #cd921f;
			font-size: 28rpx;
			padding: 0 10rpx;
		}
	}

	.ui-ball {
		margin: 30rpx 0 20rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			display: block;
		}
	}

	.ui-tip {
		background-color: #f7f7f7;
		padding: 0 40rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		position: relative;
		border-radius: 30rpx;
	}

	.ui-tip::after {
		position: absolute;
		content: '';
		border: 14rpx solid transparent;
		border-bottom-color: #F7F7F7;
		left: 50%;
		margin-left: -7px;
		top: -14px;
	}


	.ui-more {
		margin: 14rpx 0;
	}

	.ui-data {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.ui-data__item {
			padding: 0 16rpx;
			text-align: center;
			line-height: 50rpx;

			.ui-data__label {
				color: #8d8d8d;
				font-size: 26rpx;
			}

			.ui-data__val {
				color: #c88d49;
				font-size: 30rpx;
			}
		}
	}

	.ui-group {
		display: flex;
		align-items: center;

		.btn+.btn {
			margin-left: 14rpx;
		}

		.btn {
			height: 88rpx;
			flex: 1;
			font-size: 34rpx;
		}

		.btn::after {
			display: none;
		}

		.sell-btn {
			color: #c59948;
			background-color: #fbf4e4;
		}

		.buy-btn {
			color: #fff;
			background-color: #de9f2e;
		}
	}

	.ui-footer {
		border-top: 2rpx solid #f6f6f6;
	}

	.ui-select {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 32rpx;

			.label {
				color: #979797;
				margin-right: 16rpx;
			}

			.val {
				color: #2b2b2b;
				margin-right: 16rpx;
			}

			.tag {
				padding: 0 6rpx;
				border: 2rpx solid #cec5a6;
				border-radius: 2rpx;
				background-color: #fff8e4;
				color: #d5b260;
				font-size: 20rpx;
				line-height: 28rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.value {
				font-size: 24rpx;
				color: #c58c25;
				margin-right: 16rpx;
			}
		}
	}

	.follow-card {
		padding: 30rpx 30rpx 36rpx 40rpx;
		border-radius: 12rpx;
		line-height: 1;
		background: url(../../static/uview/images/follow-bg.png) no-repeat right 7rpx bottom 19rpx #fff;
		background-size: 140rpx 100rpx;
		margin-bottom: 80rpx;

		.title {
			font-size: 34rpx;
			color: #2f2f2f;
			margin-bottom: 10rpx;

			text {
				color: #ed7731;
			}
		}

		.follow-link {
			display: flex;
			align-items: center;
			margin-right: 14rpx;
		}

		.follow-sale {
			font-size: 28rpx;
			color: #a0a0a0;
			margin-right: 16rpx;
		}

		.follow-go {
			background-color: #ee7a35;
			color: #fff;
			font-size: 20rpx;
			border-radius: 15rpx;
			line-height: 30rpx;
			height: 30rpx;
			padding: 0 14rpx;
		}
	}

	.panel {
		margin-bottom: 50rpx;

		.panel-head {
			margin-bottom: 22rpx;

			.title {
				font-size: 34rpx;
				color: #3f3f3f;
				font-weight: bold;
			}
		}
	}

	.gold-row {
		margin: 0 -7rpx;

		.left {
			width: 44.45%;
			float: left;
			padding: 0 7rpx;
		}

		.right {
			width: 55.55%;
			float: left;
			padding: 0 7rpx;
		}
	}

	.gold-nav {
		border-radius: 8rpx;
		position: relative;
		background-color: #f8f3e0;
		padding: 30rpx;
		line-height: 1;
		background-position: right bottom;
		background-repeat: no-repeat;

		.gold-nav__head {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.img {
				display: block;
				width: 34rpx;
				height: 34rpx;
				margin-right: 6rpx;
			}

			.title {
				font-size: 34rpx;
				color: #000;
			}
		}

		.gold-nav__desc {
			color: #c8a83b;
			font-size: 24rpx;
		}

		.gold-btn {
			background-color: #e0a032;
			font-size: 28rpx;
			color: #fff;
			height: 54rpx;
			padding: 0;
			width: 116rpx;
			line-height: 54rpx;
			text-align: center;
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
		}
	}

	.nav1 {
		height: 322rpx;
		background-image: url(../../static/uview/images/gold-bg1.png);
		background-size: 130rpx 124rpx;
	}

	.nav2 {
		height: 154rpx;
		margin-bottom: 14rpx;
		background-image: url(../../static/uview/images/gold-bg2.png);
		background-size: 114rpx 90rpx;
	}

	.nav3 {
		height: 154rpx;
		background-image: url(../../static/uview/images/gold-bg3.png);
		background-size: 110rpx 110rpx;
	}

	.gold-tag {
		position: absolute;
		right: 0;
		top: 0;
		width: 70rpx;
		height: 70rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
		text-align: center;
	}

	.gold-tag::after {
		position: absolute;
		content: '';
		width: 0;
		height: 0;
		right: 0;
		top: 0;
		border-top: 70rpx solid #f77546;
		border-left: 70rpx solid transparent;
	}

	.gold-hot {
		transform: rotate(45deg);
		position: relative;
		z-index: 111;
		padding-left: 25rpx;
	}

	.wx-cell {
		border-radius: 8rpx;
		border: 2rpx solid #ececec;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.wx-cell__hd {
			font-size: 30rpx;
			color: #333333;
			margin-bottom: 40rpx;
			font-weight: bold;
		}
	}

	.wx-cell:last-child {
		margin-bottom: 0;
	}

	.dic-list__item {
		display: flex;
		align-items: center;
		padding: 6rpx 0;

		.img {
			display: block;
			width: 44rpx;
			height: 44rpx;
			border: 1rpx solid #fff;
			border-radius: 4rpx;
			margin-right: 12rpx;
			display: block;
		}

		.dic-talk {
			background-color: #faf1e2;
			font-size: 24rpx;
			color: #333;
			line-height: 44rpx;
			border-radius: 22rpx;
			padding: 0 16rpx;
		}
	}

	.gold-news {
		display: flex;
		align-items: center;

		.gold-news__pic {
			width: 138rpx;
			border: 2rpx solid #dedede;
			margin-right: 30rpx;
			font-size: 0;

			image {
				width: 100%;
				height: 172rpx;
			}
		}

		.gold-news__content {
			.gold-news__zt {
				font-size: 20rpx;
				display: inline-flex;
				color: #5d5d5d;
				line-height: 28rpx;
				border: 2rpx solid #e2e2e2;
				padding: 0 8rpx;
			}

			.gold-news__title {
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;
				font-weight: bold;
				margin: 8rpx 0;
			}

			.gold-news__update {
				font-size: 22rpx;
				line-height: 30rpx;
				color: #aaaaaa;
			}
		}
	}
	
	.gold-app{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		height: 78rpx;
		border-radius: 16rpx;
		image{
			display: block;
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		.title{
			font-size: 26rpx;
			color: #333333;
		}
	}
	
	.app-row{
		margin: 0 -8rpx;
	}
	
	.ui-footer{
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		.ui-footer-company{
			color: #999999;
		}
		
		.ui-footer-tip{
			color: #d1d1d1;
			margin: 6rpx 0;
		}
	}
	
	.see-more{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		
		.title{
			font-size: 26rpx;
			color: #898989;
			margin: 0 10rpx 0 20rpx;
		}
		
		.iconfont{
			font-size: 32rpx;
			color: #cbcbcb;
		}
	}
</style>
